<template>
  <!-- 采购清单 -->
  <div class="ccui-multifunctional-table-wrapper">
    <div class="btn-group">
      <el-button
        type="primary"
        :disabled="$route.query.status === '查看'"
        plain
        @click="handleDelete"
        >删除行</el-button
      >
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      show-summary
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column prop="date" label="结算单编号" width="150">
      </el-table-column>
      <el-table-column prop="name" label="设备物资名称" width="200">
      </el-table-column>
      <el-table-column prop="address" label="设备物资说明" width="130">
      </el-table-column>
      <el-table-column prop="address" label="计量单位" width="90">
      </el-table-column>
      <el-table-column prop="address" label="含税单价" width="130">
      </el-table-column>
      <el-table-column prop="address" label="含税金额" width="130">
      </el-table-column>
      <el-table-column prop="address" label="入库数量" width="100">
      </el-table-column>
      <el-table-column prop="address" label="不含税金额" width="130">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ]
    };
  },
  watch: {
    tableData: {
      handler(n) {
        n.forEach((item, index) => {
          item.sno = index;
        });
        this.$emit("getQingdan", n);
      },
      immediate: true
    }
  },
  methods: {
    // 删除
    handleDelete() {},
    // 选择项
    handleSelectionChange(row) {},
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " ";
        } else {
          sums[index] = "N/A";
        }
      });

      return sums;
    }
  }
};
</script>

<style lang="scss" scoped>
.btn-group {
  text-align: right;
  margin-bottom: 20px;
}
</style>
